<template>
  <div v-for="item in list" :key="item" :ref="setItemRef">{{ item }}</div>
  <button @click="handleClick">点击</button>
  <div ref="el">div元素</div>
</template>


<script lang="ts">
import { ref, onBeforeUpdate, onUpdated, reactive, onMounted } from "vue";
export default {
  setup() {
    const el = ref<any>(null);
    let itemRefs = reactive([]);
    const list = ref([1, 2, 3]);
    const setItemRef = (el: any) => {
      // @ts-ignore
      itemRefs.push(el);
    };
    const handleClick = () => {
      console.log(itemRefs);
    };
    onBeforeUpdate(() => {
      itemRefs = [];
    });

    onUpdated(() => {
      console.log(itemRefs);
    });
    onMounted(() => {
      el.value.innerHTML = "el元素被改变";
    })
    return {
      itemRefs,
      setItemRef,
      handleClick,
      list,
      el
    };
  },
};
</script>
